<template>
	<view class="order-list page-container">
		<!-- 状态切换栏 -->
		<view class="status-tabs">
			<view 
				v-for="(tab, index) in tabs" 
				:key="index"
				class="tab-item"
				:class="{ active: currentStatus === tab.status }"
				@tap="switchStatus(tab.status)"
			>
				<text>{{ tab.name }}</text>
			</view>
		</view>
		
		<!-- 订单列表 -->
		<view class="order-container">
			<template v-if="orders.length > 0">
				<view 
					v-for="(order, index) in orders" 
					:key="index"
					class="order-item elegant-card"
				>
					<view class="order-header">
						<text class="order-no">订单号：{{ order.id }}</text>
						<text class="order-status">{{ getStatusText(order.status) }}</text>
					</view>
					<view class="order-content">
						<image :src="url+`${order.image}`" mode="aspectFill" class="order-image"></image>
						<view class="order-info">
							<text class="title">{{ order.title }}</text>
							<text class="desc">{{ order.description }}</text>
							<text class="price">¥{{ order.price }}</text>
						</view>
					</view>
					<view class="order-footer">
						<text class="time">{{ order.createTime }}</text>
						<button 
							class="action-btn" 
							v-if="currentStatus === '2'"
							@tap="goToReview(order.id)"
						>去评价</button>
					</view>
				</view>
			</template>
			<view v-else class="empty-state">
				<text>暂无相关订单</text>
			</view>
		</view>
		
		<!-- 评论弹窗 -->
		<view class="comment-popup" v-if="showCommentModal" @touchmove.stop.prevent>
			<view class="comment-mask" @tap="closeCommentModal"></view>
			<view class="comment-container">
				<view class="comment-box">
					<view class="comment-header">
						<text>写评论</text>
						<text class="close-btn" @tap="closeCommentModal">×</text>
					</view>
					<view class="input-wrapper">
						<textarea 
							v-model="commentContent" 
							placeholder="写下你的评价..." 
							class="comment-textarea"
							:adjust-position="false"
							:cursor-spacing="20"
							:focus="showCommentModal"
						/>
					</view>
					<view class="comment-footer">
						<button 
							class="submit-btn" 
							:disabled="!commentContent.trim()"
							@tap="submitComment"
						>
							发布评论
						</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import API from '@/api/config.js'

export default {
	data() {
		return {
      url:'http://localhost:8080/download/',
      currentStatus: '0',
			tabs: [
				{ name: '待使用', status: '0' },
				{ name: '待收货', status: '1' },
				{ name: '待评价', status: '2' }
			],
			orders: [],
			showCommentModal: false,
			commentContent: '',
			currentOrderId: null,
			currentjbsId: null,
			currentUserId: null
		}
	},
	methods: {
		// 切换状态
		async switchStatus(status) {
			this.currentStatus = status
			await this.loadOrders()
			// 更新页面标题
			uni.setNavigationBarTitle({
				title: this.getStatusText(status)
			})
		},
		
		// 获取状态文本
		getStatusText(status) {
			const statusMap = {
				'0': '待使用',
				'1': '待收货',
				'2': '待评价'
			}
			return statusMap[status] || '未知状态'
		},
		
		// 加载订单列表
		async loadOrders() {
			uni.showLoading({
				title: '加载中...'
			})
			
			try {
				const token = uni.getStorageSync('token')
				if (!token) {
					throw new Error('请先登录')
				}
				
				const res = await uni.request({
					url: `${API.RESERVE_STATUS}${this.currentStatus}`,
					method: 'GET',
					header: {
						'Authorization': token
					}
				})
				
				if (res.data.code === 200) {
					this.orders = res.data.data || []
				} else {
					throw new Error(res.data.message || '加载失败')
				}
			} catch (error) {
				console.error('加载订单列表失败:', error)
				uni.showToast({
					title: error.message || '加载失败',
					icon: 'none'
				})
			} finally {
				uni.hideLoading()
			}
		},
		
		// 打开评论弹窗
		goToReview(orderId) {
			// 找到对应订单的剧本杀ID和用户ID
			const order = this.orders.find(o => o.id === orderId)
			if (!order) return
			
			console.log('准备评论订单:', order)
			this.currentOrderId = orderId
			this.currentjbsId = order.jbsId
			this.currentUserId = order.userId
			this.showCommentModal = true
			this.commentContent = ''
		},
		
		// 关闭评论弹窗
		closeCommentModal() {
			this.showCommentModal = false
			this.commentContent = ''
			this.currentOrderId = null
			this.currentjbsId = null
			this.currentUserId = null
		},
		
		// 提交评论
		async submitComment() {
			if (!this.commentContent.trim()) return
			
			try {
				const token = uni.getStorageSync('token')
				if (!token) throw new Error('请先登录')
				
				console.log('提交评论:', {
					jbsId: this.currentjbsId,
					context: this.commentContent,
					createUser: this.currentUserId
				})
				
				const res = await uni.request({
					url: API.COMMENT_ADD,
					method: 'POST',
					data: {
						jbsId: this.currentjbsId,
						context: this.commentContent.trim(),
						createUser: this.currentUserId
					},
					header: {
						'Authorization': token,
						'Content-Type': 'application/json'
					}
				})
				
				console.log('评论响应:', res)
				
				if (res.data.code === 200) {
					uni.showToast({
						title: '评论成功',
						icon: 'success'
					})
					this.closeCommentModal()
					// 刷新订单列表
					this.loadOrders()
				} else {
					throw new Error(res.data.message || '评论失败')
				}
			} catch (error) {
				console.error('提交评论失败:', error)
				uni.showToast({
					title: error.message || '评论失败',
					icon: 'none'
				})
			}
		},
		
		// 格式化时间
		formatTime(time) {
			if (!time) return ''
			return time.split('T')[0]
		}
	},
	onLoad(options) {
    this.url = API.BASE_URL_IMAGE
		// 从路由参数获取状态
		if (options.status) {
			this.currentStatus = options.status
		}
		// 设置导航栏标题
		uni.setNavigationBarTitle({
			title: this.getStatusText(this.currentStatus)
		})
		// 加载订单数据
		this.loadOrders()
	},
	
	// 下拉刷新
	async onPullDownRefresh() {
		await this.loadOrders()
		uni.stopPullDownRefresh()
	}
}
</script>

<style scoped>
.order-list {
	min-height: 100vh;
	background-color: #000;
}

.status-tabs {
	display: flex;
	background-color: #1a1a1a;
	padding: 20rpx 0;
	position: sticky;
	top: 0;
	z-index: 100;
}

.tab-item {
	flex: 1;
	text-align: center;
	padding: 20rpx 0;
	color: #888;
	font-size: 28rpx;
	position: relative;
}

.tab-item.active {
	color: #e0b080;
}

.tab-item.active::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 40rpx;
	height: 4rpx;
	background: #e0b080;
	border-radius: 2rpx;
}

.order-container {
	padding: 20rpx;
}

.order-item {
	margin-bottom: 20rpx;
	padding: 30rpx;
	background: #1a1a1a;
	border-radius: 12rpx;
}

.order-header {
	display: flex;
	justify-content: space-between;
	margin-bottom: 20rpx;
}

.order-no {
	font-size: 26rpx;
	color: #888;
}

.order-status {
	font-size: 26rpx;
	color: #e0b080;
}

.order-content {
	display: flex;
	margin-bottom: 20rpx;
}

.order-image {
	width: 160rpx;
	height: 160rpx;
	border-radius: 12rpx;
	margin-right: 20rpx;
}

.order-info {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.title {
	font-size: 28rpx;
	color: #fff;
	margin-bottom: 10rpx;
}

.desc {
	font-size: 24rpx;
	color: #888;
	margin-bottom: 10rpx;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.price {
	font-size: 32rpx;
	color: #e0b080;
	font-weight: bold;
}

.order-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 100rpx;
	margin-left: 100rpx;
	margin-top: 20rpx;
	padding-top: 20rpx;
	border-top: 1px solid #333;
}

.time {
	font-size: 24rpx;
	color: #888;
}

.action-btn {
	background: linear-gradient(135deg, #e0b080, #d4946f);
	color: #1a1a1a;
	font-size: 26rpx;
	padding: 10rpx 30rpx;
	border-radius: 30rpx;
	border: none;
}

.empty-state {
	text-align: center;
	padding: 100rpx 0;
	color: #888;
	font-size: 28rpx;
}

/* 评论弹窗样式 */
.comment-popup {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999;
	background: rgba(0, 0, 0, 0.6);
}

.comment-mask {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.comment-container {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background: #1a1a1a;
	border-radius: 24rpx 24rpx 0 0;
	padding: 30rpx;
}

.comment-box {
	padding: 30rpx;
}

.comment-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30rpx;
}

.comment-header text {
	color: #fff;
	font-size: 32rpx;
}

.close-btn {
	font-size: 40rpx;
	color: #888;
	padding: 10rpx;
}

.input-wrapper {
	margin-bottom: 30rpx;
}

.comment-textarea {
	width: 100%;
	height: 200rpx;
	background: #2c2c2c;
	border-radius: 12rpx;
	padding: 20rpx;
	color: #fff;
	font-size: 28rpx;
}

.submit-btn {
	width: 100%;
	height: 88rpx;
	background: linear-gradient(135deg, #e0b080, #d4946f);
	border-radius: 44rpx;
	color: #1a1a1a;
	font-size: 28rpx;
	font-weight: 500;
	display: flex;
	align-items: center;
	justify-content: center;
}

.submit-btn[disabled] {
	opacity: 0.5;
}
</style> 